<template>
    <view>
        <!-- pages/wallet/index.wxml -->
        <view class="headtop" :style="'padding-bottom:' + statusHeight + 'px;'">
            <image src="/static/walletbg.png" mode="aspectFit" class="headtopbg"></image>
            <view class="header" :style="'padding-top:' + statusHeight + 'px;'">
                <navigator open-type="navigateBack" hover-class="none">
                    <image src="/static/back.png" mode="aspectFit" class="back"></image>
                </navigator>
                <text class="title">{{name}}的推广</text>
            </view>
            <view class="yue">
                <view class="money" @tap="gopage" data-url="/pages/center/setting/xieyi?id=3">
                    <text>{{name}}推广总人数</text>
                    <text>{{ yue }}</text>
                </view>
                <!-- <view class="money" bindtap="gopage" data-url="/pages/center/setting/xieyi?id=4">
      <text>{{userinfo.user.okyue}}</text>
      <text>余额（元）</text>
    </view> -->
                
            </view>
        </view>
        <view class="tab">
            <text :class="type == '' ? 'active' : ''" @tap="changetab" data-type="">全部会员</text>
            <text :class="type == '1' ? 'active' : ''" @tap="changetab" data-type="1">VIP会员</text>
            <text :class="type == '2' ? 'active' : ''" @tap="changetab" data-type="2">普通会员</text>
        </view>
        <scroll-view style="height: 960rpx" scroll-y>
            <view class="ranking-bottom" v-for="(item,index) in list" :key="index">
            	<view class="bottom-left">
            		<text>{{index+1}}</text>
            		
            	</view>
            	<view class="bottom-right">
            		<view class="br-left">
            				<view class="br-left1">
            					<image :src="item.headimgurl" mode=""></image>
            				</view>
            				<view class="br-left2">
								<view style="display: flex; justify-content: space-between;">
									<view>{{item.username}}</view>
									<view>{{item.reg_time}}</view>
								</view>
								<view style="display: flex;justify-content: space-between;">
									<view>姓名:{{item.name?item.name:'无'}}</view>
									<view @click="boda(item.phone)">电话:{{item.phone}}</view>
								</view>
           				<!-- 	<text>
								{{item.username}}    
								加入时间:{{item.reg_time}}姓名:{{item.name}}
								电话:{{item.phone}}</p></text> -->
            				</view>
            		</view>
            		
            	</view>
            </view>
            <van-empty description="暂无数据" v-if="!list || list.length < 1" />
        </scroll-view>

        <view v-if="show" class="popout">
					<view class="shadow">
						
					</view>
					<view class="pop-content">
						<view>
						    <canvas canvas-id="my-canvas" style="width: 324px; height: 425px"></canvas>
						</view>
						<view class="savebtn" @tap="saveImg">保存我的推广码</view>
					</view>


        </view>
    </view>
</template>

<script>
import vanEmpty from '../../components/empty/empty.vue';

// pages/wallet/index.js
const app = getApp();
export default {
    components: {
        vanEmpty
    },
    data() {
        return {
            nextp: 1,
            count: '',
            type: '',
            show: false,
            qrcode: '',
            statusHeight: '',
            content: '',
            yue: '',
            list: '',
            qrcodeW: '',
            qrcodeH: '',
			name:''
        };
    },
    /**
     * 生命周期函数--监听页面加载
     */
    onLoad: function (options) {
        var that = this;
		this.puid = options.puid;
		this.init()
        
    },
    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady: function () {},
    /**
     * 生命周期函数--监听页面显示
     */
    onShow: function (e) {
        var that = this;
        // this.init();
    },
    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide: function () {},
    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload: function () {},
    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh: function () {},
    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom: function () {
        if (this.nextp) {
            this.init();
        }
    },
    /**
     * 用户点击右上角分享
     */
    onShareAppMessage: function () {},
    methods: {
        init() {
            var _this = this;

            uni.showLoading({
                title: '加载中...'
            });
            _this.$http(
                'center/getmydown',
                {
                    p: _this.nextp,
                    type: _this.type,
                    count: _this.count,
					puid:_this.puid
                },
                function (res) {
					uni.hideLoading()
                    if (_this.nextp == 1) {
						_this.yue = res.data.yue;
                       _this.list = res.data.list;
					   _this.qrcode = res.data.path;
					   _this.name = res.data.user.username
                    } else {
                        if (res.data.list) {
                            for (var i = 0; i < res.data.list.length; i++) {
                                _this.list.push(res.data.list[i]);
                            }

                        
                        }
                    }

                  _this.nextp = res.data.nextp;
                }
            );
        },

        changetab(e) {
            var type = e.currentTarget.dataset.type;
			this.type = type;
			this.nextp = 1;
			
            this.init();
        },
boda(phone){
			uni.makePhoneCall({
				phoneNumber:phone
			})
		},
        gopage(e) {
            var url = e.currentTarget.dataset.url;
            uni.navigateTo({
                url: url
            });
        },

        chongzhi() {
            var that = this;
            uni.showLoading({
                title: '加载中'
            });
            uni.getImageInfo({
                src: that.qrcode,

                success(res) {
                    that.qrcode= res.path,
                    that.qrcodeW= res.width,
                    that.qrcodeH= res.height
                    var ctx = uni.createCanvasContext('my-canvas', this);
                    setTimeout(() => {
                        console.log(that.qrcode);
                        that.drawImage(ctx, that.qrcode, that.qrcodeW, that.qrcodeH, that.content);
                    }, 300);
                }
            });
        },

        drawImage(ctx, qrcode, qrcodeW, qrcodeH, content) {
            var that = this;
            console.log(ctx);
            ctx.setFillStyle('#fff');
            ctx.fillRect(0, 0, 324, 534);
            ctx.drawImage('/static/dlogo.png', 0, 0, 166, 166, 20, 20, 60, 60);
            ctx.setFillStyle('#575757');
            ctx.setFontSize(17);
            ctx.fillText('我的二维码', 96, 55, 75);
            ctx.drawImage('/static/qrcodebg.png', 0, 0, 234, 237, 50, 108, 220, 220);
            ctx.drawImage(qrcode, 0, 0, qrcodeW, qrcodeH, 73, 130, 176, 176);
            var text = content; //这是要绘制的文本

            var chr = text.split(''); //这个方法是将一个字符串分割成字符串数组

            console.log(chr);
            var temp = '';
            var row = [];

            for (var a = 0; a < chr.length; a++) {
                console.log(ctx.measureText(temp).width);

                if (ctx.measureText(temp).width < 272) {
                    temp += chr[a];
                } else {
                    a--; //这里添加了a-- 是为了防止字符丢失，效果图中有对比

                    row.push(temp);
                    temp = '';
                }
            }

            row.push(temp); //如果数组长度大于2 则截取前两个

            if (row.length > 2) {
                var rowCut = row.slice(0, 2);
                var rowPart = rowCut[1];
                var test = '';
                var empty = [];

                for (var a = 0; a < rowPart.length; a++) {
                    if (ctx.measureText(test).width < 272) {
                        test += rowPart[a];
                    } else {
                        break;
                    }
                }

                empty.push(test);
                var group = empty[0] + '...'; //这里只显示两行，超出的用...表示

                rowCut.splice(1, 1, group);
                row = rowCut;
            }

            for (var b = 0; b < row.length; b++) {
                ctx.setFontSize(16);
                ctx.setFillStyle('#725D3D');
                ctx.fillText(row[b], 26, 359 + b * 20, 272);
            }

            ctx.draw(
                setTimeout(() => {
                    uni.hideLoading({
                        success: (res) => {}
                    });
                    that.show = true;
                }, 300)
            );
        },

        saveImg() {
            var that = this;
            uni.canvasToTempFilePath({
                x: 0,
                y: 0,
                canvasId: 'my-canvas',
                destWidth: 325,
                destHeight: 425,

                success(res) {
                    console.log(res);

                    if (res.errMsg == 'canvasToTempFilePath:ok') {
                        uni.saveImageToPhotosAlbum({
                            filePath: res.tempFilePath,

                            success(result) {
                                console.log(result);
                                uni.showToast({
                                    title: '已保存图片至相册',
                                    icon: 'none'
                                });
                                that.setData({
                                    show: false
                                });
                            },

                            fail(err) {
                                uni.showToast({
                                    title: '已取消',
                                    icon: 'none'
                                });
                            }
                        });
                    }
                }
            });
        },

        onClose() {
            this.setData({
                show: 0
            });
        },

        gomsg(e) {
            var id = e.currentTarget.dataset.id;
            uni.navigateTo({
                url: '/pages/wallet/mingximsg?id=' + id
            });
        },

        tixian() {
            uni.navigateTo({
                url: '/pages/wallet/tixian'
            });
        }
    }
};
</script>
<style lang="scss">
@import './index.scss';
</style>
